<template>
  <div class="homePage">
    <div class="nav">
      <div class="left">
        <img class="toplogo" src="@/assets/logo.png" />
      </div>
      <div class="right">
        <div><a href="#aboutUs">About Us</a></div>
        <div><a href="#invest">Invest</a></div>
        <div><a href="#services">Services</a></div>
        <div><a href="#advantages">Advantages</a></div>
        <div><a href="#contactUs">Contact Us</a></div>
      </div>
    </div>
    <div class="aboutUs" id="aboutUs">
      <img class="img_bg" src="@/assets/aboutUs_bg1.jpg" />
      <img class="logo" src="@/assets/aboutUs_logo.png" />
      <div class="title">Middle East Real</div>
      <div class="title">Estate Service Platform</div>
      <div class="subInfo m1">
        Tailor-made investment solutions with fullprocess
      </div>
      <div class="subInfo">support for asset appreciation.</div>
    </div>
    <div class="aboutUs2">
      <div class="left"></div>
      <div class="right">
        <img src="@/assets/aboutUs_bg2.png" />
      </div>
      <div class="con_txt">
        <div class="title">About us</div>
        <div class="subtitle">Company Introduction</div>
        <div class="intro">
          Future Capital is an international real estate consultancy and
          investment services company headquartered in Dubai. We specialize in
          providing comprehensive real estate investment solutions to clients
          worldwide. With deep market insights, a professional operations team,
          and robust resource integration capabilities, we assist clients in
          preserving and growing their assets in Dubai, one of the world’s
          hottest investment destinations.
        </div>
      </div>
    </div>
    <div class="aboutUs3">
      <div class="left">
        <img src="@/assets/aboutUs_bg3.png" />
      </div>
      <div class="right"></div>
      <div class="con_txt">
        <div class="title">Company Vision</div>
        <div class="line"></div>
        <div class="info">
          Whether you are looking for an ideal home or exploring high-yield
          investment opportunities, Future Capital is committed to a
          customer-first philosophy. <br /><br />
          We deliver tailored investment support through exceptional service
          quality and forward-thinking market analysis, ensuring a personalized
          experience for every client.
        </div>
      </div>
    </div>
    <div class="invest" id="invest">
      <div class="top">
        <div class="title">New Opportunities</div>
        <div class="title">for Global Asset Allocation</div>
        <div class="line"></div>
      </div>
      <div class="bottom">
        <div class="row">
          <div class="item">
            <div class="pre">0%</div>
            <div class="text">
              Tax Incentives: Zero personal income tax.Zero capital gains tax.
            </div>
          </div>
          <div class="item">
            <div class="pre">6%-8%</div>
            <div class="text">
              Leading Investment Returns:The real estate market offers an
              average annual rental yield of 6%-8%.
            </div>
          </div>
          <div class="item">
            <div class="pre">12%</div>
            <div class="text">
              High-End Residential Growth:Luxury residential projects boast an
              annual sales growth rate exceeding 12%.
            </div>
          </div>
        </div>
        <div class="row">
          <div class="item">
            <div class="pre">100%</div>
            <div class="text">
              Non-UAE investors can achieve 100% foreign ownership.
            </div>
          </div>
          <div class="item">
            <div class="pre">80%</div>
            <div class="text">
              Over 80% of the population in Dubai consists of expatriates,
              leading to steadily growing housing demand.
            </div>
          </div>
          <div class="item">
            <div class="pre">60%</div>
            <div class="text">
              Located at the intersection of Europe, Asia, and Africa, 60% of
              global markets are within an 8-hour flight radius.
            </div>
          </div>
        </div>
        <div class="btext m1">
          Dubai, as a world-leading international metropolis, serves not only as
          the economic and trade hub of
        </div>
        <div class="btext">
          the Middle East but also as a focal point for global investors.
        </div>
      </div>
    </div>
    <div class="services" id="services">
      <div class="top">
        <div class="line"></div>
        <div class="item">
          <div class="title">Our Services</div>
          <div>
            Assist the rental of of primary and secondary commercial/residential
            properties.
          </div>
          <div>
            Assist the rental of of primary and secondary commercial/residential
            properties.
          </div>
        </div>
      </div>
      <div class="imgs">
        <img class="img1" src="@/assets/services_bg1.png" />
        <img class="img2" src="@/assets/services_bg2.png" />
      </div>
    </div>
    <div class="advantages1" id="advantages">
      <img src="@/assets/advantages_bg1.jpg" />
      <div class="title">Our Advantages</div>
    </div>
    <div class="advantages2">
      <div class="top">
        <div class="item">
          <div class="title">Company Introduction</div>
          <div class="info">
            A professional real estate consultancy team offering accurate market
            analysis and expert advice.
          </div>
        </div>
        <div class="item h1">
          <div class="title">High-End Resource Integration</div>
          <div class="info">
            Collaborating with Dubai’s top developers, such as EMAAR, Nakheel,
            and DAMAC, to provide exclusive properties and premium resources.
          </div>
        </div>
        <div class="item h1">
          <div class="title">Customer First</div>
          <div class="info">
            Placing client needs at the core, delivering full process,
            comprehensive support from property selection to investment
            implementation.
          </div>
        </div>
        <div class="item">
          <div class="title">Global Perspective</div>
          <div class="info">
            Serving clients worldwide, including investors from China, the UK,
            India, Europe, and Gulf countries.
          </div>
        </div>
      </div>
      <div class="img">
        <img src="@/assets/advantages_bg2.png" />
      </div>
    </div>
    <div class="contact" id="contactUs">
      <div class="left">
        <img src="@/assets/contact_bg2.png" />
      </div>
      <div class="right">
        <img src="@/assets/contact_bg1.png" />
      </div>
      <div class="content">
        <div class="title">
          <img src="@/assets/aboutUs_logo.png" />
          <div class="text">Contact US</div>
        </div>
        <div class="info">
          Thank you for your interest and trust in us! For more information
          about our projects or to discuss any inquiries and collaboration
          opportunities, feel free to reach out to our professional team. You
          can contact us through the following channels, and we look forward to
          providing you with the best service.
        </div>
        <div class="detail">
          <div class="key">Phone</div>
          <div class="value">+971 50 350 8883</div>
        </div>
        <div class="detail">
          <div class="key">Email</div>
          <div class="value">michael@futurecapital.ae</div>
        </div>
        <div class="detail">
          <div class="key">Address</div>
          <div class="value">
            3rd Floor Westburry Tower, Al Abraj Street Business Bay, Dubai
          </div>
        </div>
        <div class="end">
          We look forward to working with you to build a better future !
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
</script>


<style scoped>
.homePage {
  max-width: 1920px;
}
.nav {
  height: 60px;
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 210px 0 85px;
  margin-bottom: 2px;
}
.nav .left {
  display: flex;
  align-items: center;
}
.nav .left img {
  margin-right: 12px;
}
.nav .right {
  display: flex;
  align-items: center;
  justify-content: end;
  width: 100%;
}
.nav .right div {
  margin-right: 45px;
  color: #987159;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
}
.nav .right a {
  color: #987159;
  text-decoration: none;
}
.aboutUs {
  width: 100%;
  position: relative;
  min-height: 1080px;
  margin-bottom: 2px;
}
.aboutUs .img_bg {
  max-width: 100%;
  position: absolute;
  min-height: 1080px;
}
.aboutUs .logo {
  width: 118.5px;
  height: 118.5px;
  margin: 160.5px 0 12px 224px;
  position: relative;
  z-index: 1;
}
.nav .left .toplogo{
  width: 35%;
  height: 35%;
}
.aboutUs .title {
  margin-left: 224px;
  font-size: 66px;
  font-weight: 400;
  color: #000;
  line-height: 80px;
  position: relative;
  z-index: 1;
  font-family: ;
}
.aboutUs .subInfo {
  margin-left: 224px;
  font-size: 28px;
  line-height: 36px;
  position: relative;
  z-index: 1;
}
.aboutUs .m1 {
  margin-top: 8px;
}
.aboutUs2 {
  display: flex;
  width: 100%;
  min-height: 1080px;
  position: relative;
  margin-bottom: 2px;
}
.aboutUs2 .left {
  width: 33%;
  background: #fff;
}
.aboutUs2 .right {
  width: 67%;
  background: #f2f2f2;
  text-align: right;
}
.aboutUs2 .right img {
  max-width: 82.5%;
}
.aboutUs2 .con_txt {
  position: absolute;
  top: 260px;
  left: 270px;
  width: 573px;
}
.aboutUs2 .title {
  font-size: 80px;
  line-height: 80px;
  color: #000;
}
.aboutUs2 .subtitle {
  font-size: 28px;
  color: #987159;
  line-height: 36px;
  margin: 30px 0;
}
.aboutUs2 .intro {
  font-size: 28px;
  line-height: 36px;
}
.aboutUs3 .left {
  width: 55.7%;
}
.aboutUs3 {
  display: flex;
  width: 100%;
  position: relative;
  margin-bottom: 2px;
}
.aboutUs3 .right {
  width: 44.3%;
  background: #f2f2f2;
}
.aboutUs3 .con_txt {
  width: 851px;
  height: 678px;
  background: #fff;
  position: absolute;
  top: 110px;
  right: 110px;
  padding: 182px 0 0 132px;
}
.aboutUs3 .con_txt .title {
  font-size: 28px;
  color: #987159;
  line-height: 36px;
  margin-bottom: 66px;
}
.aboutUs3 .con_txt .line {
  height: 1px;
  width: 145px;
  margin-bottom: 38px;
  background: #987159;
}
.aboutUs3 .con_txt .info {
  width: 533px;
  font-size: 28px;
  line-height: 36px;
}
.invest .top {
  height: 360px;
  background: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.invest .top .title {
  font-size: 80px;
  color: #000;
  line-height: 80px;
}
.invest .top .line {
  height: 1px;
  background: #987159;
  width: 773px;
  margin-top: 32px;
}
.invest .bottom {
  height: 600px;
  background: #f2f2f2;
  padding: 90px 200px 30px 328px;
}
.invest .bottom .row {
  display: flex;
  justify-content: space-between;
}
.invest .bottom .row .item {
  height: 215px;
  width: 314px;
  margin-bottom: 40px;
}
.invest .bottom .row .pre {
  font-size: 80px;
  line-height: 80px;
  color: #987159;
  margin-bottom: 7.5px;
}
.invest .bottom .row .text {
  font-size: 20px;
  line-height: 25.2px;
  color: #000;
}
.invest .bottom .btext {
  width: 100%;
  text-align: center;
  font-size: 28px;
  line-height: 36px;
}
.invest .bottom .m1 {
  margin-top: 10px;
}
.services {
  min-height: 1080px;
  background: #fff;
  margin: 2px 0;
}
.services .top {
  height: 232px;
  padding: 150px 120px 150px 150px;
}
.services .top .line {
  width: 466px;
  height: 1px;
  background: #987159;
  margin-bottom: 65px;
}
.services .top .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 106px;
}
.services .top .item div {
  max-width: 460px;
  font-size: 28px;
  line-height: 36px;
}
.services .top .item .title {
  max-width: 550px;
  font-size: 80px;
}
.services .imgs {
  display: flex;
  width: 100%;
}
.services .imgs .img1 {
  width: 67%;
}
.services .imgs .img2 {
  width: 33%;
}
.advantages1 {
  min-height: 1080px;
  margin-bottom: 2px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.advantages1 .title {
  font-size: 80px;
  position: relative;
  color: #fff;
  z-index: 1;
}
.advantages1 img {
  min-height: 1080px;
  width: 100%;
  position: absolute;
}
.advantages2 {
  min-height: 1080px;
  background: #fff;
  margin-bottom: 2px;
}
.advantages2 .img {
  height: 488px;
}
.advantages2 .top {
  height: 529px;
  padding: 63px 142px 0 172px;
  display: flex;
  justify-content: space-between;
}
.advantages2 .top .item {
  width: 332px;
}
.advantages2 .top .h1 {
  width: 345px;
}
.advantages2 .top .title {
  color: #987159;
  height: 180px;
  font-size: 28px;
  display: flex;
  align-items: flex-end;
  margin-bottom: 40px;
  font-weight: 700;
}
.advantages2 .top .info {
  font-size: 28px;
}
.advantages2 .img img {
  width: 100%;
  height: 100%;
}
.contact {
  display: flex;
  position: relative;
}
.contact .left {
  background: #f2f2f2;
  width: 50%;
  display: flex;
  align-items: center;
}
.contact .left img {
  max-width: 22%;
  position: relative;
  z-index: 1;
}
.contact .right {
  width: 50%;
  background: #987159;
  display: flex;
  align-items: center;
  justify-content: end;
}
.contact .right img {
  max-width: 60%;
}
.contact .content {
  width: 870px;
  height: 613px;
  position: absolute;
  top: 108px;
  left: 194px;
  background: #fff;
  padding: 129px 65px 120px 100px;
}
.contact .content .title {
  display: flex;
  align-items: flex-end;
  margin-bottom: 80px;
}
.contact .content img {
  width: 118px;
  height: 118px;
}
.contact .content .title .text {
  font-size: 80px;
  line-height: 80px;
  margin-left: 93px;
}
.contact .content .info {
  font-size: 28px;
  line-height: 36px;
  margin-bottom: 30px;
}
.contact .content .detail {
  display: flex;
  margin-bottom: 16px;
}
.contact .content .key,
.contact .content .value {
  min-width: 119px;
  font-size: 22px;
  color: #987159;
  line-height: 30px;
}
.contact .content .value {
  color: #000;
}
.contact .content .end {
  font-size: 28px;
  line-height: 36px;
  text-align: center;
  margin-top: 50px;
}
</style>
 